<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .red{
            background-color: red;
        }
        .white{
            color: white;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click="show = !show">点击我看美女</button>
    <!-- :key给vue自已用，会提升效率 -->
    <!--<ul v-if="show">
        <li v-for="(user,index) in users" v-if="index%2 === 0" :key="index" >
            {{index}} - {{user.name}} : {{user.gender}} : {{user.age}}
        </li>
    </ul>-->

    <!-- v-show样式里会有“display: none;”而v-if隐藏的元素里不含样式。-->
    <ul v-show="show">
        <!-- :key给vue自已用，会提升效率 -->
        <li v-for="(user,index) in users" v-show="index%2 === 0" :key="index" >
            {{index}} - {{user.name}} : {{user.gender}} : {{user.age}}
        </li>
    </ul>

    <!--<input type="text" v-model="color">-->
    <button @click="flag = !flag">点击我变颜色</button>
    <ul>
        <li v-for="(v,k,i) in person"  v-bind:class="{red:flag, white:flag}">
            {{i}} - {{v}}：{{k}}
        </li>
    </ul>
    <h1 v-if="Math.random() > 0.5">
        你的值大于0.5
    </h1>
    <h1 v-else>
        你的值小于0.5
    </h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            users:[
                {name:'柳岩', gender:'女', age: 21},
                {name:'虎哥', gender:'男', age: 30},
                {name:'范冰冰', gender:'女', age: 24},
                {name:'刘亦菲', gender:'女', age: 18},
                {name:'古力娜扎', gender:'女', age: 25}
            ],
            person:{name:'柳岩', gender:'女', age: 21},
            show:false,
            flag:true,
            colors:['red', 'white']
        }
    })
</script>
</body>
</html>
